<template>
  <div class="race-page" v-if="!isBackground">
    <div class="header">
      <div class="round-info">
        <span class="round-text">第 {{ this.roundIndex }} 轮</span>
        <span class="timer"
          ><i class="el-icon-time" @click="startTimer"></i>剩余时间:
          {{ minutes }}:{{ seconds }}</span
        >
      </div>
      <div class="btn">
        <el-button @click="nextRound" icon="el-icon-refresh"> </el-button>
      </div>
    </div>

    <el-divider />

    <!-- 管理员界面 -->
    <el-card class="admin-panel" v-if="!isStudent && !keyPoint">
      <!-- 显示辖区人员头像 -->
      <div class="scroll-container">
        <vue-seamless-scroll
          :data="popQuList1"
          :class-option="optionHover"
          class="scroll-card"
          ref="seamlessScroll"
          :scrolling="true"
        >
          <div class="people-grid" ref="person-card">
            <div
              v-for="(person, index) in popQuList1"
              :key="index"
              class="person-card"
              :class="{
                selected: selectPopQu.includes(person),
                disabled: selectedHistory.includes(person.id),
              }"
              @click="selectPerson(person)"
              ref="people"
            >
              <div class="avatar-container">
                <img :src="person.image" alt="" class="avatar" />
              </div>
              <div class="serial-number">
                <el-tag size="large" type="info"
                  ><h3 style="margin: 0">编号：{{ person.id }}</h3></el-tag
                >
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
        <vue-seamless-scroll
          :data="popQuList2"
          :class-option="optionHover"
          class="scroll-card"
          ref="seamlessScroll"
          :scrolling="true"
        >
          <div class="people-grid" ref="person-card">
            <div
              v-for="(person, index) in popQuList2"
              :key="index"
              class="person-card"
              :class="{
                selected: selectPopQu.includes(person),
                disabled: selectedHistory.includes(person.id),
              }"
              @click="selectPerson(person)"
              ref="people"
            >
              <div class="avatar-container">
                <img :src="person.image" alt="" class="avatar" />
              </div>
              <div class="serial-number">
                <el-tag size="large" type="info"
                  ><h3 style="margin: 0">编号：{{ person.id }}</h3></el-tag
                >
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </el-card>

    <div class="next-round" v-if="!isStudent && !keyPoint">
      <el-button type="primary" class="dialog-btn" @click="showRoll"
        >显示答案</el-button
      >
    </div>

    <div class="student-card" v-if="isStudent && !keyPoint">
      <div class="student-grid">
        <div class="btn-grid" v-for="(item, index) in student" :key="index">
          <div class="btn-text" @click="showStudent(item, index)">
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <el-card v-if="keyPoint" class="point">
      <div class="community">{{ community[communityIndex] }}</div>
      <div class="point-grid" ref="person-card">
        <div
          v-for="(person, index) in popQuList"
          :key="index"
          class="point-card"
          :class="{
            selected: selectPopQu.includes(person),
            disabled: selectedHistory.includes(person.id),
          }"
          @click="selectPerson(person)"
          ref="people"
        >
          <div class="avatar-container">
            <img :src="person.image" alt="" class="avatar" />
          </div>
          <div class="serial-number">
            <el-tag size="large" type="info">编号：{{ person.id }}</el-tag>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="next-round" v-if="keyPoint">
      <el-button type="primary" class="dialog-btn" @click="showStudent"
        >确定</el-button
      >
    </el-card>

    <div class="btn-next">
      <el-button @click="backExam" icon="el-icon-arrow-left"> </el-button>
      <el-button
        @click="() => this.$router.push({ name: 'Saftey' })"
        icon="el-icon-arrow-right"
        style="float: right"
      >
      </el-button>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose"
      :fullscreen="true"
      :center="true"
      custom-class="custom-dialog"
    >
      <div v-if="isStudent && !keyPoint">
        <div class="pop-grid">
          <div
            class="pop-container"
            v-for="(item, index) in onCommnity"
            :key="index"
            :class="{ selected: selectedAnswers.includes(item) }"
            @click="selectAnswer(item)"
          >
            <div class="avatar-pop">
              <img :src="item.image" alt="" class="imp-avatar" />
            </div>
            <div class="answer-container">
              <div class="info-row">
                <span class="label-pop">社区：</span>
                <span class="value">{{ item.address }}</span>
              </div>
              <div class="info-row">
                <span class="label-pop">姓名：</span>
                <span class="value">{{ item.name }}</span>
              </div>
              <div class="dialog-serial-number">
                <el-tag size="large" effect="dark" type="warning"
                  >编号：{{ item.id }}</el-tag
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <template slot="title">
        <span class="timer"
          ><i class="el-icon-time" @click="startTimer"></i>剩余时间:
          {{ minutes }}:{{ seconds }}</span
        >
      </template>
      <div v-if="keyPoint">
        <el-row :gutter="20" type="flex" justify="center" align="middle">
          <el-col :span="12" v-for="item in selectPopQu" :key="item.id">
            <el-card
              class="comparison-card"
              :class="{
                errorcard: item.job && item.job != '',
              }"
            >
              <div class="image-container">
                <img :src="item.image" :alt="item.name" />
              </div>
              <div class="answer-container" v-if="item.job && item.job != ''">
                <div class="info-row">
                  <span class="label">社区：</span>
                  <span class="value" v-if="showAnswer">{{
                    item.address
                  }}</span>
                </div>
                <div class="info-row">
                  <span class="label">姓名：</span>
                  <span class="value" v-if="showAnswer">{{ item.name }}</span>
                </div>
                <div class="info-row">
                  <span class="label">类型：</span>
                  <span class="value" v-if="showAnswer">{{
                    item.content
                  }}</span>
                </div>
                <div class="info-row" v-if="item.job && item.job != ''">
                  <span class="label">居住地：</span>
                  <span class="value" v-if="showAnswer">{{ item.job }}</span>
                </div>
              </div>
              <div class="answer-contaniner" v-else>
                <div class="info-row-error">
                  <p>选择错误！</p>
                </div>
              </div>
              <div class="dialog-serial-number">
                <el-tag size="large" effect="dark" type="warning"
                  >编号：{{ item.id }}</el-tag
                >
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button v-if="isRight" type="primary" @click="toggleAnswer">
            {{ showAnswer ? "下一轮" : "显示答案" }}
          </el-button>
          <el-button v-else type="primary" @click="toggleAnswer">
            <!-- {{ showAnswer ? "下一轮" : "显示答案" }} -->
            下一轮
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>

  <div class="role-exam" v-else>
    <img src="images/bg/28.jpg" alt="" />

    <div class="btn-next">
      <!-- <el-button @click="()=>{this.isBackground = false}" icon="el-icon-arrow-left"> </el-button> -->
      <el-button
        @click="nextRound"
        icon="el-icon-arrow-right"
        style="float: right"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveRob, saveQuick } from "@/api/exam/exam";
import { fetchQucikDetail } from "@/api/paper/exam";
import { mapGetters } from "vuex";

export default {
  name: "Population",

  data() {
    return {
      role: "student",
      winner: null,
      submittedAnswer: null,
      popQuList: [],
      popQuList1: [],
      popQuList2: [],
      selectPopQu: [],
      selectedAnswers: [], // 新增用于存储选中的答案
      dialogVisible: false,
      showAnswer: false,
      selectedHistory: [],
      roundArr: ["round", "important"], //important
      timer: null,
      intervalId: null,
      itemWidth: 0,
      offset: 0,
      timeLeft: 180,
      minutes: "03",
      seconds: "00",
      roundIndex: 0,
      communityIndex: 0,
      isStudent: false,
      keyPoint: false,
      isScrolling: false,
      isBackground: false,
      isRight: false,
      community: [
        "湘府社区",
        "白石警务区",
        "湖大社区",
        "潭洲社区",
        "阳光里社区",
        "王十万社区",
        "永佳社区",
        "青山桥警务区",
        "长岭警务区",
        "长青社区",
        "东阳社区",
        "黄金二社区",
      ],
      student: [
        "张一",
        "张二",
        "张三",
        "张四",
        "张五",
        "张六",
        "张七",
        "张八",
        "张九",
        "张十",
        "张十一",
        "张十二",
      ],
    };
  },

  created() {
    this.role = this.$store.state.user.roles[0];
    this.fetchData();
  },

  computed: {
    ...mapGetters(["avatar"]),
    optionHover() {
      return {
        step: this.isScrolling ? 0.2 : 0,
        limitMoveNum: 2,
        hoverStop: false,
        direction: 2,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },

    onCommnity() {
      return this.popQuList.filter(
        (item) => item.address === this.community[this.communityIndex]
      );
    },
  },

  methods: {
    backExam() {
      this.$router.go(-1);
    },

    showStudent(item, index) {
      if (this.keyPoint) {
        if (this.timer) {
          clearInterval(this.timer);
          
        }
        console.log("++++++++")
        this.selectPopQu.map(item=>{
          if (item.job) {
            this.isRight = true
          }
        })
        console.log(this.isRight);

        this.dialogVisible = true;
        return;
      }
      this.communityIndex = index;
      this.dialogVisible = true;
      
    },

    showRoll() {
      this.isStudent = true;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },

    startTimer() {
      if (this.timer) return; // 防止重复启动

      this.isScrolling = true;

      if (this.keyPoint) {
        this.timeLeft = 60;
        this.minutes = "01";
        this.seconds = "00";
      } else {
        this.timeLeft = 180;
        this.minutes = "03";
        this.seconds = "00";
      }

      this.timer = setInterval(() => {
        this.timeLeft--;
        this.minutes = Math.floor(this.timeLeft / 60)
          .toString()
          .padStart(2, "0");
        this.seconds = (this.timeLeft % 60).toString().padStart(2, "0");

        if (this.timeLeft <= 0) {
          this.$message.warning("本轮时间已到!");
          clearInterval(this.timer);
          this.timer = null;
          this.isScrolling = false;
        }
      }, 1000);
    },

    selectAnswer(item) {
      const index = this.selectedAnswers.indexOf(item);
      if (index === -1) {
        this.selectedAnswers.push(item);
      } else {
        this.selectedAnswers.splice(index, 1);
      }
    },

    nextRound() {
      this.communityIndex = 0;
      this.keyPoint = true;
      if (this.roundIndex == 1 && !this.isBackground) {
        this.isBackground = true;
        return;
      } else {
        this.isBackground = false;
      }
      if (this.roundIndex < this.roundArr.length) {
        this.roundIndex++;
        this.fetchData();
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
        this.timeLeft = 60;
        this.minutes = "01";
        this.seconds = "00";
        this.isScrolling = false;
      } else {
        this.$message.warning("已经是最后一轮了");
      }
    },

    fetchData() {
      let params = { id: "" };
      if (this.roundIndex == 0) {
        params = { id: this.roundArr[this.roundIndex++] };
      } else {
        params = { id: this.community[this.communityIndex] };
      }

      fetchQucikDetail(params).then((res) => {
        this.popQuList = res.data.popQu;
        // this.popQuList2 = res.data.popQu
        // this.popQuList.forEach
        // console.log(res);
        let i = 0;
        let qu1 = [];
        let qu2 = [];
        this.popQuList.forEach((item) => {
          if (i < 60) {
            qu1.push(item);
            i++;
          } else {
            qu2.push(item);
            i++;
          }
        });
        this.popQuList1 = qu1;
        this.popQuList2 = qu2;
      });
    },

    selectPerson(person) {
      if (!this.keyPoint) {
        const index = this.selectPopQu.indexOf(person);
        if (index === -1) {
          this.selectPopQu.push(person);
        } else {
          this.selectPopQu.splice(index, 1);
        }
      } else {
        this.selectPopQu.push(person);
        if (this.selectPopQu.length > 2) {
          this.selectPopQu.shift();
        }
      }
    },

    handleClose() {
      this.selectPopQu = [];
      this.selectedAnswers = [];
      this.dialogVisible = false;
      this.showAnswer = false;
    },

    toggleAnswer() {
      // let sele = this.selectPopQu.filter((item) => item.job != null);

      if(!this.isRight){
        this.communityIndex++;
        this.fetchData();
        this.popQuList = [...this.popQuList].sort(() => Math.random() - 0.5);
        this.handleClose();
        return
      }
      this.showAnswer = !this.showAnswer;

      if (!this.showAnswer) {
        this.communityIndex++;
        this.fetchData();
        this.popQuList = [...this.popQuList].sort(() => Math.random() - 0.5);
        this.handleClose();
      }
    },
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
.race-page {
  padding: 20px 0;
  background-color: #f9f9f9;
  min-height: 100vh;

  width: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 2%;
  padding: 0 20px;
}

.round-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.round-text {
  font-size: 36px; /* 增大字体 */
  font-weight: 800; /* 加粗 */
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影 */
  letter-spacing: 2px; /* 增加字间距 */
}

.timer {
  font-size: 32px; /* 增大字体 */
  color: #f56c6c;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
}

.timer i {
  cursor: pointer;
  margin-right: 5px;
  font-size: 32px; /* 增大图标 */
}

.timer i:hover {
  color: #ff4949;
  transform: scale(1.1); /* 悬停时放大效果 */
  transition: transform 0.2s;
}

.el-divider {
  position: absolute;
  /* top: 65px; */
  top: 8%;
  margin: 1px;
}

.role-exam {
  width: 100%;
  height: 100%;
  display: flex;
}

.role-exam img {
  width: 100%;
  height: 100%;
}

.btn {
  position: absolute;
  right: 2%;
  display: flex;
  justify-content: flex-end;
  opacity: 0.3;
}

.next-btn {
  width: 100%;
  display: flex;
  justify-content: end;
}

.admin-panel {
  margin: 50px auto;
  margin-bottom: 10px;
  /* max-width: 1400px; */
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.scroll-container {
  width: 100%;
  overflow: hidden; /* Hide overflow */
}

.scroll-card {
  display: flex; /* Use flexbox for horizontal scrolling */
  flex-direction: row; /* Horizontal layout */
  transition: transform 0.5s ease; /* Smooth transition */
}

.people-grid {
  display: flex; /* Ensure items are in a row */
  flex-wrap: nowrap; /* Prevent wrapping */
}

.person-card {
  min-width: 200px; /* Set a minimum width for each card */
  margin: 20px; /* Add some spacing between cards */
  height: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.avatar-container {
  width: 200px;
  height: auto;
}

.avatar-container .avatar {
  width: 100%;
  height: auto;
}

.community {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
}

.point {
  margin-top: 50px;
  width: 1400px;
}

.point-grid {
  width: 100%;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 10px 0;
  align-items: center;
}

.point-card {
  text-align: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 15px;
  width: 100%;
  height: 280px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.point-card.selected {
  border-color: #409eff;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}

.point-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.serial-number {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.next-round {
  width: 1400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  z-index: 10;
}

.student-card {
  width: 1400px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
}

.student-grid {
  width: 100%;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.student-grid .btn-grid {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-text {
  width: 200px;
  height: 100px;
  background-color: #f56c6c;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 28px;
  font-weight: bold;
}

.dialog-btn {
  width: 200px;
  font-size: 20px;
  margin: 0;
}

.pop-grid {
  width: 100%;
  /* height: 400px; */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin: 0px 0;
}

.pop-container {
  text-align: center;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 10px;
}

.pop-container.selected {
  border-color: #409eff;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
  background-color: #ecf5ff;
}

.avatar-pop {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imp-avatar {
  width: auto;
  height: 100%;
  /* width: 100%;
  height: auto; */
  object-fit: cover;
}

.comparison-card {
  margin: 20px;
  text-align: center;
  padding: 20px;
}

.errorcard {
  border-color: #6cf57c;
  box-shadow: 0 0 100px rgba(8, 177, 11, 0.5);
}

.disabcard {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  margin: 20px 0;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}

.answer-container {
  margin: 10px 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 24px;
}

.info-row-error {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 30px;
  margin-left: 15px;
  justify-content: center;
  color: #b82e2e;
}

.label-pop {
  width: 120px;
  text-align: right;
  color: #606266;
  font-weight: bold;
}

.label {
  width: 160px;
  /* text-align: right; */
  color: #606266;
  font-weight: bold;
  margin-right: 15px;
  text-align: justify;
  text-align-last: justify;
}

.value {
  flex: 1;
  text-align: left;
  color: #303133;
  font-size: 28px;
  font-weight: bold;
}

.value.job-highlight {
  color: #f56c6c;
  font-size: 32px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff3f3;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #ffa6a6;
}

.dialog-footer {
  text-align: center;
  margin-top: 20px;
}

.dialog-serial-number {
  margin-top: 15px;
  text-align: center;
}

.dialog-serial-number .el-tag {
  font-size: 28px;
  /* padding: 8px 15px; */
}

.btn-next {
  width: 100%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
  z-index: 1;
  padding: 0 10px;
}

/* 自定义对话框样式 */
.custom-dialog .el-dialog__title {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.custom-dialog .el-dialog__header {
  padding: 25px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}
</style>